﻿@page "/docs/components/switch"

<Seo Canonical="/docs/components/switch" Title="Blazorise Switch component" Description="Learn to use and work with the Blazorise Switch component, which provides users the ability to choose between two distinct values." />

<DocsPageTitle Path="Components/Switch">
    Blazorise Switch  component
</DocsPageTitle>

<DocsPageLead>
    Switch is used for switching between two opposing states.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>Switch</Code> component provides users the ability to choose between two distinct values. These are
    very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.
</DocsPageParagraph>

<DocsPageParagraph>
    Switches are the preferred way to adjust settings on mobile. The option that the switch controls,
    as well as the state it’s in, should be made clear from the corresponding inline label.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic" />
    <DocsPageSectionContent Outlined FullWidth>
        <BasicSwitchExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicSwitchExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding" />
    <DocsPageSectionContent Outlined FullWidth>
        <SwitchWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SwitchWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding" />
    <DocsPageSectionContent Outlined FullWidth>
        <SwitchWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SwitchWithEventExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Switch<>)]"/>